<template>
    <layout>
        <el-page-header @back="$router.back()" :content = this.content></el-page-header>
        <el-form label-width="80px">
            <el-form-item label="分类名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item> 
            <el-form-item label="分类">
                <el-select v-model="form.cate_id" placeholder="请选择">
                    <el-option v-for="(item, index) in cateList" :label="item.name" :value="item.id" :key="index">
                        {{item.name}}
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="品牌">
                <el-select v-model="form.brand_id" placeholder="请选择">
                    <el-option v-for="(item, index) in brandList" :label="item.name" :value="item.id" :key="index">
                        {{item.name}}
                    </el-option>
                </el-select>
            </el-form-item>        
            <el-form-item label="图片">
                <el-upload :headers="headers" :file-list="fileList" :on-success="handleSuccess"
                action="http://localhost:7002/img/upload"
                list-type="picture-card" >
                <i class="el-icon-plus"></i>
                </el-upload>             
            </el-form-item>        
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
        </el-form>
    </layout>
</template>

<script>
export default {
    data() {
        return {
            form: {
                name:'',
                price:'',
                cate_id: '',
                brand_id:''
            },
            content:'',
            headers:{
                authorization:localStorage.getItem('token')
            },
            cateList: [],
            brandList: [],
            fileList: []
        }
    },
    created() {
        if(this.$route.params.id){
            this.$http.get(`product/get?id=${this.$route.params.id}`).then(res => {
                if(res.errcode == 0){
                    let data = res.data
                    this.form.name = data.name
                    this.form.id = data.id
                    this.form.price = data.price
                    this.form.brand_id = data.brand_id
                    this.form.cate_id = data.cate_id
                    this.form.img_id = data.img_id
                    this.fileList.push({
                        url: `http://localhost:7002/${data.img}`
                    })
                }
            })
            this.content = '编辑商品页面'

        } else{
            this.content = "新增商品页面"
        }
        this.$http.get('/cate/select').then(res => {
            if(res.errcode == 0){
                this.cateList = res.data
            }
        })
        this.$http.get('/brand/select').then(res => {
            if(res.errcode == 0){
                this.brandList = res.data
            }
        })
    },
    methods: {
        handleSuccess(res) {
            if(res.errcode == 0){
                this.form.img_id = res.data.id
            }
        },
        save() {
            if(this.$route.params.id) {
                this.$http.post('/product/update',this.form).then(res => {
                    if(res.errcode == 0){
                        this.$router.back()
                    }
                })
            }else{
                this.$http.post('/product/insert',this.form).then(res => {
                    if(res.errcode == 0){
                        this.$router.back()
                    }
                })
            }

        }
    }
}
</script>
<style>
.el-page-header{
    margin-bottom: 25px;
    margin-top: 5px;
}
</style>>
